<template>
  <div>{{ count }}</div>
  <div>{{ doubleCount }}</div>
  <ul>
    <li v-for="item in f" :key="item">{{ item }}</li>
  </ul>
  <button @click="addCount(1)">addCount</button>
  <button @click="count++">count++</button>
</template>

<script>
// import { mapState } from 'pinia';
import { mapState, mapActions,mapWritableState } from './pinia';
import { useStore } from './store';

export default {
  computed: {
    // 直接取
    ...mapWritableState(useStore, ['count']),
    ...mapState(useStore, ['doubleCount']),
    // 改个名fruits改名f
    ...mapState(useStore, {
      f: 'fruits'
    }),
  },
  methods: {
    ...mapActions(useStore, ['addCount']),
  },
}
</script>
